<template>
  <div>
    <div class="title"><span class="required">*</span>商品规格（最多设置3个）</div>
    <div class="specs">
      <div v-for="(item,index) in specList" :key="index" class="specs-item">
        <div class="specs-key">
          <el-input v-model="item.name" style="width: 400px;" />
          <el-button link style="color: #F56C6C" :icon="Delete" @click="deleteSpecItem(index)" />
        </div>
        <div class="specs-value">
          <div v-for="(value,idx) in item.values" :key="value.key" class="specs-value-tag">
            <el-tag
              v-show="!value.showInput"
              style="cursor: pointer; user-select: none"
              closable
              :disable-transitions="true"
              size="default"
              @click="editSpecItemValue(value)"
              @close="deleteSpecItemValue(idx, index)"
            >{{ value.value }}</el-tag>
            <div v-show="value.showInput" class="value-input">
              <el-input :ref="'specInput' + index" v-model="value.inputValue" size="small" @blur="saveSpecItemValue(value, item)" @keyup.enter="saveSpecItemValue(value, item)" />
              <el-button class="input-btn" :icon="Check" @click="saveSpecItemValue(value, item)" />
              <el-button class="input-btn" :icon="Close" @click="closeSpecItemValue(value)" />
            </div>
          </div>
          <div v-show="item.showInput" key="spec-input" class="value-input specs-value-tag">
            <el-input :ref="'specInput' + index" v-model="item.inputValue" size="small" @blur="addSpecItemValue(item)" @keyup.enter="addSpecItemValue(item)" />
            <el-button class="input-btn" :icon="Check" @click="addSpecItemValue(item)" />
            <el-button class="input-btn" :icon="Close" @click="closeSpecItemValue(item)" />
          </div>
          <el-button :icon="Plus" v-show="!item.showInput" class="specs-value-tag" @click="addSpecItemValue(item)">添加规格值</el-button>
        </div>
      </div>
    </div>
    <div class="btn-box">
      <el-button :icon="Plus" v-if="specList.length < 3 " class="btn" @click="addSpecItem">添加规格项</el-button>
      <el-button :icon="Refresh" class="btn" @click="refreshSku">生成价格库存表</el-button>
    </div>
  </div></template>

<script setup>
import {Delete,Check,Close,Plus,Refresh} from "@element-plus/icons-vue"
import { guid } from "@/utils/index.js"
import modal from "@/plugins/modal.js"

const props = defineProps({
  specs: {
    type: [Array, String],
    default: () => []
  }
})

const specList = ref([])
watch(() => props.specs, (newVal) => {
  if (typeof newVal === 'string' && newVal) {
    const arr = JSON.parse(newVal)
    specList.value = Array.isArray(arr) ? arr.map(v => ({
      name: v.name,
      key: guid(16),
      showInput: false,
      inputValue: '',
      values: v.values.map(t => ({ value: t, showInput: false, inputValue: '', key: guid(16) }))
    })) : []
  } else if (Array.isArray(newVal)) {
    specList.value = newVal.map(v => ({
      name: v.name,
      key: guid(16),
      showInput: false,
      inputValue: '',
      values: v.values.map(t => ({ value: t, showInput: false, inputValue: '', key: guid(16) }))
    }))
  } else {
    specList.value = []
  }
},{immediate:true})

const addSpecItem = () => {
  specList.value.push({ name: '', showInput: false, inputValue: '', values: [], key: guid(16) })
}

const addSpecItemValue = (item) => {
  if (!item.showInput){
    item.showInput = true
  }else {
    if (item.inputValue) {
      if (item.values.some(v => v.value === item.inputValue)) {
        modal.msgError('此规格已添加')
        return
      } else {
        item.values.push({ value: item.inputValue, showInput: false, inputValue: '', key: guid(16) })
      }
    }
    item.showInput = false
    item.inputValue = ''
  }
}

const editSpecItemValue = (value) => {
  value.inputValue = value.value
  value.showInput = true
}

const saveSpecItemValue = (value,item) => {
  if (!value.inputValue){
    value.showInput = false
    value.inputValue = ''
  }else {
    if (value.inputValue === value.value){
      value.showInput = false
      value.inputValue = ''
      return
    }
    if (item.values.some(v => v.value === value.inputValue)){
      modal.msgError('此规格已添加')
      return
    }
    value.value = value.inputValue
    value.showInput = false
    value.inputValue = ''
  }
}

const closeSpecItemValue = (item) => {
  item.showInput = false
  item.inputValue = ''
}

const deleteSpecItem = (index) =>{
  modal.confirm('是否确认删除该规格项？').then(() => {
    specList.value.splice(index, 1)
  }).catch(() => {})
}

const deleteSpecItemValue = (idx, index) => {
  modal.confirm('是否确认删除该规格值？').then(() => {
    specList.value[index].values.splice(idx, 1)
  }).catch(() => {})
}

const emit = defineEmits(['generate'])

const refreshSku = () => {
  if (!specList.value.length) {
    modal.msgError('未填写规格信息')
    return
  }
  if (specList.value.some(v => !v.name || !v.values.length || v.values.some(t => !t.value))) {
    modal.msgError('规格信息未填写完整')
    return
  }
  emit('generate', specList.value.map(v => ({
    name: v.name,
    values: v.values.map(v => v.value)
  })))
}
</script>

<style lang="scss" scoped>
.title {
  padding: 10px 20px;
  font-weight: 700;
  font-size: 20px;
  .required {
    color: #f00;
    margin-right: 10px;
    font-size: 16px;
  }
}
.specs {
  padding: 0 20px 20px;
  .specs-item {
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 20px;
  }
  &-key {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f5f5f5;
    height: 52px;
    padding: 0 10px;
  }
  &-value {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 20px 20px;
    &-tag {
      margin-right: 20px;
      margin-top: 20px;
    }
    .btn {
      margin-right: 0;
      color: #b1b1b1;
      cursor: pointer;
      border: 1px solid #e1e1e1;
      padding: 4px 14px;
      border-radius: 4px;
      font-size: 14px;
    }
  }
  .value-input {
    display: flex;
    align-items: center;
    .input-btn {
      height: 20px;
      width: 24px;
      padding: 0;
      color: #b1b1b1;
      border: 1.5px solid #b1b1b1;
      border-radius: 50%;
      margin-left: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }
}
.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #b1b1b1;
  height: 160px;
}
.btn-box {
  display: flex;
  justify-content: center;
  align-items: center;
  .btn {
    background-color: #0081ff;
    padding: 10px 20px;
    color: #ffffff;
    cursor: pointer;
    border-radius:4px;
    margin-right: 20px;
  }
}
</style>
